body{
    text-align: center;
    height: 3000px;
}
.box{
    width: 200px;
    height: 200px;
    outline: 1px solid red;
    margin: 0 auto;
    background-color: rgb(232, 248, 195);
    transition: 0.3s;
}
.b1:hover{
    /* transform: translateX(50px) translateY(60px); */
    transform: translate(10%,20px);
}
.b2:hover{
     /* transform: rotateY(45deg) rotateX(45deg); */
     transform: rotate(45deg);
     /* transform: rotateZ(45deg); */
}
.b3{
    display: inline-block;
}
.b3:hover{
    
    /* transform: scaleX(0.5); */
    /* transform: scaleY(0.5); */
    /* transform: scale(0.5，0.2); */
    transform: scale(1.5);
}
.b4{
    display: inline-block;
    margin:50px;
    
}
.r1{

}
.r1:hover{
    transform: rotateZ(45deg);
    /* 默认值 */
    /* transform-origin: 50% 50%; */
}
.r2{
    transform-origin: 0 0;
}
.r2:hover{
    transform: rotateZ(45deg);

}
.r3{
    transform-origin: right bottom;
}
.r3:hover{
    
    transform: rotateZ(45deg);
    
}